<template>
    <div id="app">
    <header>
        <van-nav-bar title="疾病百科" >
            <template #left>
                <van-icon name="arrow-left" size="18"  @click="back"/>
            </template>
        </van-nav-bar>
        <van-search v-model="value" placeholder="请输入搜索关键词" @focus="search"/>
    </header>

    <main>
        <van-tabs v-model="active">
        <van-tab title="常见疾病 "><van-divider /></van-tab>

        <van-tab title="传染病 ">
        <van-divider />
           <div class="box">
           <van-button type="primary" size="mini" color="#666666">全部</van-button>
           <van-button type="primary" size="mini" color="#666666">甲类传染病</van-button>
           <van-button type="primary" size="mini" color="skyblue">乙类传染病</van-button>
           <van-button type="primary" size="mini" color="#666666">丙类传染病</van-button>
           </div>
        <div class="list">
        <van-image
        round
        width="3rem"
        height="3rem"
        src="https://img01.yzcdn.cn/vant/cat.jpeg"
        />
        <van-cell title="新型冠状病毒肺炎" is-link  />
        <van-divider />
        </div>
        <div class="list">
        <van-image
        round
        width="3rem"
        height="3rem"
        src="https://img01.yzcdn.cn/vant/cat.jpeg"
        />
        <van-cell title="新型冠状病毒肺炎" is-link  />
        <van-divider />
        </div>
        <div class="list">
        <van-image
        round
        width="3rem"
        height="3rem"
        src="https://img01.yzcdn.cn/vant/cat.jpeg"
        />
        <van-cell title="新型冠状病毒肺炎" is-link  />
        <van-divider />
        </div>
        <div class="list">
        <van-image
        round
        width="3rem"
        height="3rem"
        src="https://img01.yzcdn.cn/vant/cat.jpeg"
        />
        <van-cell title="新型冠状病毒肺炎" is-link  />
        <van-divider />
        </div>
        <div class="list">
        <van-image
        round
        width="3rem"
        height="3rem"
        src="https://img01.yzcdn.cn/vant/cat.jpeg"
        />
        <van-cell title="新型冠状病毒肺炎" is-link  />
        <van-divider />
        </div>
        <div class="list">
        <van-image
        round
        width="3rem"
        height="3rem"
        src="https://img01.yzcdn.cn/vant/cat.jpeg"
        />
        <van-cell title="新型冠状病毒肺炎" is-link  />
        <van-divider />
        </div>
        
            
        </van-tab>

        <van-tab title="重大疾病 "><van-divider /></van-tab>
        </van-tabs>
      
    
    </main>
        
    </div>
</template>

<script>
import router from '@/router';

   export default {
    data() {
        return {
            value:"",
            active: 1,
        }
    },
    methods: {
        search(){
            this.$router.push("/search")
        },
        back(){
            this.$router.go(-1)
        }
    }
   }
</script>

<style scoped lang="less">
    main{
        .van-tabs{
            .van-tabs__content{
                .van-tab__pane{
                    .box{ 
                        display: flex;
                        justify-content: space-around;
                        margin-bottom: 30px;
                    }
                    .list{
                        display: flex;
                        padding: 10px;
                        
                    }
                }
            }
        }
    }
</style>